<template>
    <div class="chat-page">
        <div class="chat-content">
            <user-list class="userList"> </user-list>
            <chat-content class="chatContent"></chat-content>
            <el-button type="primary" class="right-button" @click="show">显示</el-button>
        </div>
        <div class="business" :class="{'flag':showFlag}">
            <ul class="nav">
                <li >
                    <router-link to="/app/chatPage/inquiry">询价单</router-link>
                </li>
                <li>
                    <router-link to="/app/chatPage/fixCode">定码</router-link>
                </li>

                <li><router-link to="/app/chatPage/offer">退货单</router-link></li>



                <li><router-link to="/app/chatPage/test">互动消息</router-link></li>
                </li>


            </ul>
         <router-view></router-view>
        </div>
    </div>
</template>

<script>
  import UserList from '@/components/userList'
  import ChatContent from '@/components/chatContent'
  export default {
    components: {
      UserList,
      ChatContent
    },
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        showFlag:false
      }
    },
    mounted () {

    },
    methods: {
      show(){
        this.showFlag = !this.showFlag
      }
    }
  }
</script>
<!-- -->
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" type="text/scss">
    .chat-page{
        height: 100%;
        width:100%;
        display: flex;
        flex-direction: row;
        background: #FFFFFF;
        .chat-content{
            width: auto;
            height:100%;
            display: flex;
            flex: 1;
            position: relative;
            .userList{
                width: 300px;
            }
            .chatContent{
                flex: 1;
            }
            .right-button{
                position: absolute;
                top: 50%;
                right: 0;
            }
        }
        .business{
            width: 500px;
            border-left: 1px solid #C7C4C4;
            box-sizing: border-box;
            transition-property: width 1s linear 2s;
            /* Firefox 4 */
            -moz-transition:width 1s linear 2s;
            /* Safari and Chrome */
            -webkit-transition:width 1s linear 2s;
            /* Opera */
            -o-transition:width 1s linear 2s;
            .nav{
                height: 44px;
                width: 100%;
                background: #EEEEEE;
                display: flex;
                border: 1px solid #E0DFDF;
                box-sizing: border-box;
                li{
                    flex: 1;
                    height: 44px;
                    line-height: 44px;
                    text-align: center;
                    font-size: 14px;
                    color: #9B9B9B;
                    a{
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                }
                .router-link-active{
                    color: #3999FF;
                    border-bottom: 2px solid #3999FF;
                    line-height: 40px;
                    box-sizing: border-box;
                }
            }
        }
        .flag{
            display: none;
            width: 0;
        }
        @media screen and (max-width: 1248px) {
            .business {
                display: none;
                width: 0;
            }
        }
    }
</style>
